<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<style type="text/css">
            body {
                background-color: #EEEEEE;
            }
            h1{
                color: #DC143C;
            }
            div {
                border: 1px solid #DC143C;
                border-radius: 12px;
                margin-top: 10px;
                padding: 10px;
                text-align: center;
            }

            .radio1 label {
                display: inline-block;
                position: relative;
                width: 28px;
                height: 28px;
                border: 1px solid #ccc;
                background-color: #FFF;
                cursor: pointer;
                border-radius: 50%;
                margin-top: 10px;
            }
            /*核心就是把label变成了单选框的样式，把radio隐藏起来，因为选中label就会选中对应的额radio，所以用户不必直接选radio了，而是通过label变相的来选中radio。但好处就是label可以加动画样式。*/
            /*给label的后边加一个动画*/

            .radio1 label:after {
                content: "";
                position: absolute;
                top: 4px;
                left: 4px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #666;
                -moz-transform: scale(0);
                -webkit-transform: scale(0);
                -ms-transform: scale(0);
                -o-transform: scale(0);
                transform: scale(0);
                -moz-transition: transform .5s ease-out;
                -webkit-transition: transform .5s ease-out;
                -o-transition: transform .5s ease-out;
                -ms-transition: transform .5s ease-out;
                transition: transform .5s ease-out;
            }
            /*把小黑点做出来，缩放为0.做出来的方法，是在label的后边加上了一个空伪类，然后填充颜色*/

            .radio1 input[type="radio"]:checked+ label {
                /*这既是灵活运用伪类选择器和兄弟选择器了。checked表示被选中的那个radio，+表示那个radio下边的近邻label*/
                background-color: #eee;
                -moz-transition: transform .2s ease-out;
                -webkit-transition: transform .2s ease-out;
                -ms-transition: transform .2s ease-out;
                -o-transition: transform .2s ease-out;
                transition: transform .2s ease-out;
            }

            .radio1 input[type="radio"]:checked+ label:after {
                -moz-transform: scale(1);
                -ms-transform: scale(1);
                -webkit-transform: scale(1);
                -o-transform: scale(1);
                transform: scale(1);
                -moz-transition: transform .5s ease-out;
                -webkit-transition: transform .5s ease-out;
                -o-transition: transform .5s ease-out;
                -ms-transition: transform .5s ease-out;
                transition: transform .5s ease-out;
            }

            .radio1 input[type="radio"] {
                display: none;
            }
            /*radio2自己练习旋转动画*/
            .radio2 label{
                width: 30px;
                height: 30px;
                background-color: coral;
                display: inline-block;
                border-radius: 50%;
                border: 1px solid #D2B48C;
                margin-right: 5px;
                position: relative;
                cursor: pointer;
                overflow: hidden;/*///*/
            }
            .radio2 label:after{
                content: "";
                width: 20px;
                height: 20px;
                background-color: #90EE90;
                position: absolute;
                top: 5px;
                left: 5px;
                border-radius: 50%;
                -webkit-transform: rotate(-80deg);
                -moz-transform: rotate(-180deg);
                -ms-transform: rotate(-180deg);
                -o-transform: rotate(-180deg);
                transform: rotate(-180deg);
                -webkit-transform-origin: -10px 50%;
                -moz-transform-origin: -10px 50%;
                -ms-transform-origin: -10px 50%;
                -o-transform-origin: -10px 50%;
                transform-origin: -3px 50%;
                -webkit-transition: transform .7s ease-out;
                -moz-transition: transform .7s ease-out;
                -ms-transition: transform .7s ease-out;
                -o-transition: transform .7s ease-out;
                transition: transform .7s ease-out;
            }
            .radio2 input[type="radio"]:checked + label{
                background-color: #4169E1;
                -webkit-transition: background-color .7s ease-out;
                -moz-transition: background-color .7s ease-out;
                -ms-transition: background-color .7s ease-out;
                -o-transition: background-color .7s ease-out;
                transition: background-color .7s ease-out;
            }
            .radio2 input[type="radio"]:checked +label:after{
                -webkit-transform: rotate(0deg);
                -moz-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                -o-transform: rotate(0deg);
                transform: rotate(0deg);
                -webkit-transition: transform .7s ease-out;
                -moz-transition: transform .7s ease-out;
                -ms-transition: transform .7s ease-out;
                -o-transition: transform .7s ease-out;
                transition: transform .7s ease-out;
            }
            .radio2 input[type="radio"]{
                display: none;
            }
        </style>


</head>
<body>
<div class="radio1">
            <h1>缩放动画</h1>
            <input type="radio" name="ys" id="r1" />
            <label for="r1"></label>
            <input type="radio" name="ys" id="r2" />
            <label for="r2"></label>
            <input type="radio" name="ys" id="r3" />
            <label for="r3"></label>
        </div>
        <div class="radio2">
            <h1>旋转动画</h1>
            <input type="radio" name="ys2" id="r4" />
            <label for="r4"></label>
            <input type="radio" name="ys2" id="r5" />
            <label for="r5"></label>
            <input type="radio" name="ys2" id="r6" />
            <label for="r6"></label>
        </div>

</body>
</html>





 <form id="inv"  class="form-horizontal" role="form"  >

                    <div class="form-group">

                        <label for="czyqm" class="col-lg-3 control-label">是否重置邀请码:</label>
                        <div class="col-lg-8">
                          <div class="el-checkbox">
                             <input type="checkbox" id="checkbox" name="check1" value="option1">
                              <label for="checkbox" class="el-checkbox-style"></label>

                           </div>

                    </div>
                    </div>

                        <div class="form-group">
                            <label for="qyyqm" class="col-lg-3 control-label">是否启用邀请码:</label>

                        <div class="col-lg-8">

                               <div class="el-checkbox">
                             <input type="checkbox" id="checkbox1" name="check2" value="option2">
                              <label for="checkbox1" class="el-checkbox-style"></label>
                               </div>

                    </div>


                    </div>

                </form>

